<template>
    <div>
        <mj-title type="h2" title="Radio 单选框"></mj-title>
        <div class="page-desc">基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-radio v-model="radio1" @change="radioChange">Radio</mj-radio>
                <span class="gray9 ml20">值：{{radio1}}</span>
                <mj-divider>单独使用</mj-divider>
                <div class="page-desc">使用 v-model 可以双向绑定数据。</div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio v-model="radio1">Radio&lt;/mj-radio>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    radio1: false
                                }
                            }
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="禁用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-radio v-model="radio2" :disabled="true">Radio</mj-radio>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio v-model="radio2" :disabled="true">Radio&lt;/mj-radio>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    radio2: true
                                }
                            }
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="单选框组"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-button @click="changeGroupVal">动态改变值</mj-button>
                <div class="mb5">已选：{{groupValue1}}</div>
                <mj-radio-group disabled :data="data2" v-model="groupValue1" @change="groupChange"></mj-radio-group>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio-group :data="data" v-model="groupValue" @change="groupChange">&lt;/mj-radio-group>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    data: [
                                        {label: '选项1', value: 'a1'},
                                        {label: '选项2', value: 'a2'},
                                        {label: '选项3', value: 'a3'},
                                        {label: '选项4', value: 'a4'},
                                        {label: '禁用', value: 'a5', disabled: true}
                                    ],
                                    groupValue: 'a2',
                                }
                            },
                            methods: {
                                groupChange(v){
                                    console.log('groupChange:' + v);
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="按钮样式"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb5">已选：{{groupValue}}</div>
                <mj-radio-group disabled :data="data" v-model="groupValue" type="button" @change="groupChange"></mj-radio-group>
                <br /><br />
                <mj-radio-group :data="data" v-model="groupValue" type="border"></mj-radio-group>
                <br /><br />
                <mj-radio-group :data="data" v-model="groupValue" type="button-space"></mj-radio-group>
                <br />
                <mj-radio-group :data="data" v-model="groupValue" type="border-space"></mj-radio-group>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio-group :data="data" v-model="groupValue" @change="groupChange" type="button">&lt;/mj-radio-group>
                        &lt;mj-radio-group :data="data" v-model="groupValue" @change="groupChange" type="border">&lt;/mj-radio-group>
                        &lt;mj-radio-group :data="data" v-model="groupValue" @change="groupChange" type="button-space">&lt;/mj-radio-group>
                        &lt;mj-radio-group :data="data" v-model="groupValue" @change="groupChange" type="border-space">&lt;/mj-radio-group>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    data: [
                                        {label: '选项1', value: 'a1'},
                                        {label: '选项2', value: 'a2'},
                                        {label: '选项3', value: 'a3'},
                                        {label: '选项4', value: 'a4'},
                                        {label: '禁用', value: 'a5', disabled: true}
                                    ],
                                    groupValue: 'a2',
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="按钮尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-radio-group disabled :data="data" v-model="groupValue" size="large" type="button"></mj-radio-group>
                <br /><br />
                <mj-radio-group :data="data" v-model="groupValue" type="button"></mj-radio-group>
                <br /><br />
                <mj-radio-group :data="data" v-model="groupValue" size="small" type="button"></mj-radio-group>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio-group :data="data" v-model="groupValue" size="large" type="button">&lt;/mj-radio-group>
                        &lt;mj-radio-group :data="data" v-model="groupValue" type="button">&lt;/mj-radio-group>
                        &lt;mj-radio-group :data="data" v-model="groupValue" size="small" type="button">&lt;/mj-radio-group>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    data: [
                                        {label: '选项1', value: 'a1'},
                                        {label: '选项2', value: 'a2'},
                                        {label: '选项3', value: 'a3'},
                                        {label: '选项4', value: 'a4'},
                                        {label: '禁用', value: 'a5', disabled: true}
                                    ],
                                    groupValue: 'a2',
                                }
                            }
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Radio 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用当前项</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Radio Group 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>单选框组数据</td>
                    <td>Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>单选框组样式,可选<code>button</code>、<code>button-space</code>、<code>border</code>、<code>border-space</code></td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>尺寸，可选值为<code>large</code>、<code>small</code>、默认尺寸不设置。只有在type设置了样式之后才有视觉效果</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Radio 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>选中事件</td>
                    <td>value</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Radio Group 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>选中事件</td>
                    <td>{label,value}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                radio1: false,
                radio2: true,
                data: [
                    {label: '选项1', value: 'a1'},
                    {label: '选项2', value: 'a2'},
                    {label: '选项3', value: 'a3'},
                    {label: '选项4', value: 'a4'},
                    {label: '禁用', value: 'a5', disabled: true}
                ],
                data2: [
                    {label: '选项1', value: 0},
                    {label: '选项2', value: 1},
                    {label: '选项3', value: 2},
                    {label: '选项4', value: 3},
                    {label: '禁用', value: 4, disabled: true}
                ],
                groupValue: 'a2',
                groupValue1: 1,
            }
        },
        methods: {
            radioChange(v){
                console.log('radioChange：' + v);
            },
            groupChange(item){
                console.log(item);
            },
            changeGroupVal() {
                this.groupValue1 = 2
            }
        },
    }
</script>